<script setup>
import { ref,onMounted } from 'vue'
import {coursesApi} from "../../../api/study";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from 'vue-router'
import {useStudyStore} from '../../../stores/studystore'

const router=useRouter()
const store=useStudyStore()
// 我的班级 数据
const courses=ref([])

const fromData=ref({
  sid:store.student.id,
  gid:store.grade.id
})

// 页面打开就会执行
onMounted(()=>{
  
  loadData()
})
//查询 请求接口
const loadData=async ()=>{

  const r=await coursesApi(fromData.value);
  courses.value=r.data;
}
const tzItem=(obj)=>{
  //路由跳转--->我的课件
  store.course=obj;
  router.push("/study/item")
}

</script>
<template>
  <Box>

    <el-row>
      <el-col v-for="c in courses" :key="c.id" :span="6">
          <el-card @click="tzItem(c)" style="max-width: 480px" shadow="always">
          <template #header>{{c.title}}</template>
          <div class="dv2"><img style="width:100%;heigh:100%" :src="c.imgUrl"/></div>
          <div class="dv2"><label class="lb1">课程说明：</label><label class="lb2">{{c.info}}</label></div>
          <div class="dv2"><label class="lb1">授课老师：</label><label class="lb2">{{c.teacher}}</label></div>
          <div class="dv2"><label class="lb1">老师介绍：</label><label class="lb2">{{c.teacherInfo}}</label></div>
          <div class="dv2"><label class="lb1">课程进度：</label><label class="lb2">{{c.result}}</label></div>
          <div class="dv2"><label class="lb1">课程类型：</label><label class="lb2">{{c.type}}</label></div>
        </el-card>
      </el-col>
    </el-row>
  
  </Box>
</template>

<style scoped>
.dv2{
  margin-top:10px
}
</style>
